layui.use(['laypage','jquery'], function() {
    var laypage = layui.laypage,$ = layui.$;
    $(".page").each(function(i,the){
        laypage.render({
            elem: the //注意，这里的 test1 是 ID，不用加 # 号
            ,count: 50 //数据总数，从服务端得到
        });
    });
    $('button span').each(function () {
        var $span = $(this);
        var $btn = $(this).parent();
        $btn.hover(function () {
            var html = $span.html();
            var $icon = $span.prev();
            if (html == '已关注'){
                $span.html('取消关注');
                $icon.removeClass('layui-icon-friends');
                $icon.addClass('layui-icon-user');
            } else {
                $icon.removeClass('layui-icon-user');
                $icon.addClass('layui-icon-friends');
            }
        },function () {
            var html = $span.html();
            var $icon = $span.prev();
            if (html == '取消关注'){
                $span.html('已关注');
                $icon.removeClass('layui-icon-user');
                $icon.addClass('layui-icon-friends');
            } else if (html == '关注') {
                $icon.removeClass('layui-icon-friends');
                $icon.addClass('layui-icon-user');
            }
        });
        $btn.click(function () {
            var html = $span.html();
            var $icon = $span.prev();
            if (html == '关注'){
                $span.html('已关注');
                $icon.removeClass('layui-icon-user');
                $icon.addClass('layui-icon-friends');
            } else {
                $span.html('关注');
                $icon.removeClass('layui-icon-friends');
                $icon.addClass('layui-icon-user');
            }
        });
    });
});